import React from "react"; //必须存在
import Menuitem from "./menuItem.js";

export default class menupage extends React.Component {
  constructor(props) {
    super(props);
    this.todoInput = React.createRef();
    this.state = {
      menu: [
        {
          id: 0,
          name: "菜单1",
          children: [
            { id: 3, name: "菜单1-1", children: [], parent: 0 },
            { id: 4, name: "菜单1-2", children: [], parent: 0 },
          ],
          parent: 0,
        },
        {
          id: 1,
          name: "菜单2",
          children: [
            { id: 5, name: "菜单2-1", children: [], parent: 1 },
            { id: 6, name: "菜单2-2", children: [], parent: 1 },
          ],
          parent: 0,
        },
        {
          id: 2,
          name: "菜单3",
          children: [
            { id: 7, name: "菜单3-1", children: [], parent: 2 },
            {
              id: 8,
              name: "菜单3-2",
              children: [
                { id: 10, name: "菜单3-2-1", children: [], parent: 8 },
                { id: 11, name: "菜单3-2-2", children: [], parent: 8 },
              ],
              parent: 2,
            },
          ],
          parent: 0,
        },
        {
          id: 9,
          name: "菜单4",
          children: [],
          parent: 0,
        },
      ],
    };
  }

  // 点击菜单
  changeMenu = (item, index) => {
    console.log(item, index, "点击菜单");
    if (!item.children.length) return;
    let display = document.getElementsByClassName("meunitem" + item.id)[0].style
      .display;
    if (display) {
      document.getElementsByClassName("meunitem" + item.id)[0].style.display =
        "";
    } else {
      document.getElementsByClassName("meunitem" + item.id)[0].style.display =
        "block";
    }
  };

  // 点击菜单父级
  changeMenu1 = (item, index) => {
    console.log(item, index, "点击菜单1");
    if (!item.children.length) return;
    let display = document.getElementsByClassName("meunitems" + index)[0].style
      .display;
    for (let i = 0; i < this.state.menu.length; i++) {
      if (this.state.menu[i].id === item.id) {
        if (display) {
          document.getElementsByClassName(
            "meunitems" + this.state.menu[i].id
          )[0].style.display = "";
        } else {
          document.getElementsByClassName(
            "meunitems" + this.state.menu[i].id
          )[0].style.display = "block";
        }
      } else {
        document.getElementsByClassName(
          "meunitems" + this.state.menu[i].id
        )[0].style.display = "";
      }
    }
  };

  // 无限级菜单点击事件
  changeItem = (data) => {
    console.log(data, "ul,li组件通讯");
    if (!data.children.length) return;

    for (let i = 0; i < data.children.length; i++) {
      let display = document.getElementsByClassName(
        "items" + data.children[i].id
      )[0].style.display;
      if (display) {
        document.getElementsByClassName(
          "items" + data.children[i].id
        )[0].style.display = "";
      } else {
        document.getElementsByClassName(
          "items" + data.children[i].id
        )[0].style.display = "block";
      }
    }
  };

  render() {
    return (
      <div className="menupage">
        <div>
          {"全部可展开"}
          {this.state.menu.map((item, index) => (
            <div className="menubox" key={item.id}>
              <div
                className="menuf"
                onClick={() => this.changeMenu(item, index)}
              >
                {item.name}
              </div>
              <div className={"meunitem" + item.id} v-if={item.children.length}>
                {item.children.map((item1, index1) => (
                  <div className="menuitem" key={item1.id}>
                    <div onClick={() => this.changeMenu(item1, index1)}>
                      {item1.name}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div>
          {"只能展开一个"}
          {this.state.menu.map((item, index) => (
            <div className="menubox" key={item.id}>
              <div
                className="menuf"
                onClick={() => this.changeMenu1(item, index)}
              >
                {item.name}
              </div>
              <div
                className={"meunitems" + item.id}
                v-if={item.children.length}
              >
                {item.children.map((item1, index1) => (
                  <div
                    className="menuitem"
                    key={item1.id}
                    onClick={() => this.changeMenu1(item1, index1)}
                  >
                    {item1.name}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div className="itembox">
          {"menu无限级"}
          {this.state.menu.map((item, index) => (
            <Menuitem key={item.id} data={item} changeItem={this.changeItem} />
          ))}
        </div>
      </div>
    );
  }
}
